<!-- 移动端资源分配 -->
<template>
  <section>
    <div>
      <p>
        <el-checkbox v-model="checkAll" @change="selectAll">全选</el-checkbox>
      </p>
      <div class="app_container">
        <div v-for="(v, i) in pageData" :key="i" class="chart-wrapper">
          <div
            class="current"
            :class="v.active ? 'current-active' : 'current-normal'"
            @click="changeItem(v)"
          >
            <img draggable="false" :src="getImg(v.icon)" alt="暂无图片" />
            <span>{{ v.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
import draggable from "vuedraggable";

export default {
  name: "appResource",
  mounted() {
    this.initData();
  },
  props: {
    userId: {
      type: [Number, String],
      default: null
    },
    groupId: {
      type: [Number, String],
      default: null
    },
    type: {
      type: Number,
      default: 1
    }
  },
  computed: {},
  watch: {
    //监听pageData下active来改变checkAll
    pageData: {
      handler(val) {
        this.checkAll = val.every(item => item.active == true);
      },
      deep: true
    }
  },
  data() {
    return {
      pageData: [],
      currentArr: [],
      checkAll: false
    };
  },
  methods: {
    getImg(val) {
      return window.api.image + "/" + val;
    },

    /**
     * 描述：全选框 事件
     * 时间： 2021/4/24
     */
    selectAll(active) {
      this.pageData.map(item => {
        item.active = active;
        if (active) {
          !this.currentArr.includes(item.id) && this.currentArr.push(item.id);
        } else {
          this.currentArr = [];
        }
      });
    },

    /**
     * 描述：点击事件
     * 时间： 2021/4/24
     */
  changeItem(item) {
      item.active = !item.active;
      if (item.active && !this.currentArr.includes(item.id)) {
        this.currentArr.push(item.id);
      } else {
        let index = this.currentArr.findIndex(v => v === item.id);
        this.currentArr.splice(index, 1);
      }
    },

    /**
     * 描述：获取移动端资源列表及用户选中资源
     * 时间： 2021/4/24
     */
    initData() {
      let groupId = this.groupId;
      let tem = { pageSize: 1000 };
      this.API.getResourceAppPageList(tem).then(ret => {
        this.pageData = ret.data.records;
        this.API.getResourceAppIdsByGroupId({
          groupId
        }).then(ret => {
          this.currentArr = ret.data;
          this.pageData.map(item => {
            // 返回数据为空的话 pageData下active都设为false currentArr为[]
            if (ret.data.includes(item.id)) {
              this.$set(item, "active", true);
            } else {
              this.$set(item, "active", false);
            }
          });
        });
      });
    }
  }
};
</script>
<style scoped lang="scss">
.app_container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;

  .chart-wrapper {
    display: flex;
    justify-content: center;
    width: 20%;
    padding: 10px 0;

    .current {
      width: 60px;
      height: 50px;
      border-radius: 10px;
      padding: 5px;
      display: flex;
      cursor: pointer;
      flex-direction: column;
      align-items: center;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;

      img {
        width: 30px;
      }

      span {
        letter-spacing: 1px;
        opacity: 0.9;
        margin-top: 5px;
        font-size: 12px;
      }
    }

    .current-active {
      background-color: #f4faff;
      /*color: #409eff;*/
      border: 3px dashed #409eff;
    }

    .current-normal {
      background-color: #f4faff;
      border: 3px dashed #ffffff;
    }
  }
}
</style>
